<template>
   <el-row :gutter="20" @next="nextPage">
     <el-col   :xs="{span:20,push:2}" :sm="{span:10,push:7}" :md="{span:8,push:8}" :lg="{span:6,push:9}" >
       <el-card shadow="always" :body-style="{ padding: '20px' }">
         <el-form :model="user" ref="userForm" :rules="rules" label-width="80px" :inline="false" size="normal">
          <el-form-item label="密码：" prop="newPassword">
             <el-input type="text" v-model="user.newPassword"  show-password></el-input>
           </el-form-item>
          <el-form-item label="再次输入密码：" prop="oldPassword">
             <el-input type="text" v-model="user.oldPassword"  show-password></el-input>
           </el-form-item>
          <el-row >
            <el-col :span="24"  :style="{'text-align':'center'}">
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="onReset()">重置</el-button>
            </el-col>
          </el-row>
         </el-form>
       </el-card>
     </el-col>
   </el-row>
</template>


<script lang="ts">
  import { Component, Vue, Ref ,Emit , Watch} from 'vue-property-decorator';
  import {ElForm,ValidateCallback} from 'element-ui/types/form';
  import UserReset from '@/domain/UserReset';
  import http from '@/utils/request';
  import Rules,{Validator,Rule} from '@/domain/Rules';


   @Component
   class ResetPassword extends Vue {

     user:UserReset={newPassword:"",oldPassword:""};
     @Ref('userForm')  readonly userform!:ElForm;


      //字符串中含有空字符
      trimValidator:Validator=(rules:any,value:string,calllback:Function):void=>{
              if (value.length>value.trim().length) {
                calllback(new Error('不能含有空格'));
                return;
              }
              calllback();
      }

      //新旧密码比较
      compValidator:Validator=(rules:any,value:string,calllback:Function):void=>{
              if (this.user.newPassword!=this.user.oldPassword) {
                calllback(new Error('密码前后不一致'));
                return;
              }
              calllback();
      }

     //  密码校验规则
      readonly  pwdValidatorArr:Array<Rule>=[
        {
        "trigger":"change",
        "required":true,
        "message":"请输入密码"
        },
        {
        "trigger":"change",
        "min":6,
        "max":20,
        "message":"密码字符在6-20"
        },
        {
        "trigger":"change",
        "validator":this.trimValidator,
        "message":"密码不能存在空字符"
        },
        {
            "trigger":"change",
            "validator":this.compValidator,
            "message":"密码前后不一致"
        }
      ];

      readonly rules:Rules={
        "newPassword":this.pwdValidatorArr,
        "oldPassword":[
          ...this.pwdValidatorArr
        ],
      };



      onSubmit():void{
        //参数校验
        let  callback:ValidateCallback= (isValid: boolean, invalidFields: object): void=>{
          if(isValid){
            http({
              url:'/user/password',
              method:'POST',
              data:this.user
            }).then((resp):void=>{
                console.log(resp)
                this.nextPage();
            })

            return;
          }
          console.error('请求参数校验失败')
        };
        this.userform.validate(callback)
      }

      onReset():void{
        this.userform.resetFields();
      }

      @Emit('next')
      nextPage():number{
        return 2;
      }

      @Watch('user',{deep:true})
      userWatch(vlue:UserReset){
         if(vlue.newPassword==vlue.oldPassword){
          //  当密码相等时清空消息
              this.userform.clearValidate();
         }
      }
  }
  export default ResetPassword;
</script>
